<template>
	<view class="page">
		<u-gap height="30"></u-gap>
		
		<!-- 个人信息 -->
		<view class="avatarVue padding20 margin0 flex-between align-center" v-if="isLogin">
			<view class="flex align-center">
				<!-- <u-avatar src="../../static/user.png" mode="circle" size="82"></u-avatar> -->
				<image src="../../static/user.png" style="width: 82rpx; height: 82rpx; border-radius: 50%;"></image>
				<view class="flex-column flex-between" style="height: 72rpx;">
					<text class="name" v-if="user.phone">{{ user.phone | conceal() }}</text>
					<text class="name" v-else>{{ user.username }}</text>
					<view class="vipStr">{{ user.membershipName? user.membershipName : '基础会员' }}</view>
				</view>
			</view>
			<view class="btn" @click="$tools.route('./vip')">购买会员</view>
		</view>
		
		<view class="avatarVue padding20 margin0 flex-between align-center" v-else>
			<view class="flex align-center" @click="$tools.route('../login/login')">
				<!-- <u-avatar src="../../static/user.png" mode="circle" size="82"></u-avatar> -->
				<image src="../../static/user_1.png" style="width: 82rpx; height: 82rpx; border-radius: 50%;"></image>
				<text class="name">登录</text>
			</view>
		</view>
		
		<!-- 积分管理 -->
		<view class="pointVue margin30">
			<view class="label">积分管理</view>
			<view class="flex-between margin20">
				<view class="info flex-column flex-between">
					<text style="color: #A3ACAD;">AI视频</text>
					<text style="color: #17AD84; font-weight: 600; font-size: 30rpx;">{{ isLogin ? aiVideoPoints : 0 }}</text>
				</view>
				<view class="info flex-column flex-between">
					<text style="color: #A3ACAD;">AI微信</text>
					<text style="color: #347EEF; font-weight: 600; font-size: 30rpx;">{{ isLogin ? aiWechatPoints : 0 }}</text>
				</view>
			</view>
			<view class="flex-between margin20">
				<view class="li" @click="$tools.navigate('./charge')">积分充值</view>
				<view class="li" @click="$tools.navigate('./record')">积分记录</view>
			</view>
		</view>
		
		<!-- 兑换码 -->
		<view class="exchangeVue margin30" v-if="isLogin">
			<view class="flex-between">
				<view class="label">兑换码</view>
				<text style="color: #18AB4E; text-decoration: underline; font-size: 26rpx;" @click="$tools.route('./exchange')">兑换管理</text>
			</view>
			<view class="flex margin20 align-center">
				<input type="text" placeholder="请输入兑换码" v-model="code" />
				<view class="btn" @click="getRedemptionCode()" >兑换</view>
			</view>
		</view>
		
		<!-- 我的管理 -->
		<view class="myManageVue margin30">
			<!-- <view class="li flex-between align-center margin10" @click="$u.toast('暂未开放')">
				<text>微信管理</text>
				<image src="../../static/more.png" style="width: 40rpx; height: 40rpx;"></image>
			</view> -->
			<view class="li flex-between align-center" @click="$tools.navigate('./myVoice')">
				<text>声音管理</text>
				<image src="../../static/more.png" style="width: 40rpx; height: 40rpx;"></image>
			</view>
			<view class="li flex-between align-center" @click="$tools.navigate('./myVideo')">
				<text>我的AI视频作品</text>
				<image src="../../static/more.png" style="width: 40rpx; height: 40rpx;"></image>
			</view>
			<view class="li flex-between align-center" @click="$tools.navigate('./setup')">
				<text>设置</text>
				<image src="../../static/more.png" style="width: 40rpx; height: 40rpx;"></image>
			</view>
		</view>
		
		<u-gap height="30"></u-gap>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	export default {
		data() {
			return {
				aiVideoPoints: 0,
				aiWechatPoints: 0,
				code: ""
			}
		},
		
		computed: {
			...mapState({
				isLogin: state=> state.isLogin,
				user: state=> state.user
			})
		},
		
		async onShow() {
			await this.getPoint()
		},
		
		methods: {
			// 获取积分
			async getPoint(){
				const res = await this.$request("/aiet-user-center/user/points/summary", {}, "GET")
				if(res.code===200) {
					this.aiVideoPoints = res.data.aiVideoPoints
					this.aiWechatPoints = res.data.aiWechatPoints
				}
			},
			
			// 使用兑换码
			async getRedemptionCode() {
				if(!this.code) return this.$u.toast("兑换码不能为空")
				uni.showLoading()
				const res = await this.$request("/aiet-user-center/user/redemptionCode/update", {
					code: this.code,
					used: true,
					usedId:this.user.id
				}, "PUT")
				if (res.code === 200){
					uni.hideLoading()
					this.code = ""
					this.getPoint();
					this.$u.toast("兑换成功")
				}else{
					uni.hideLoading()
					this.$u.toast(res.msg)
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.myManageVue {
		width: 690rpx;
		border-radius: 12rpx;
		background: #fff;
		padding: 0 20rpx;
		.label {
			color: #000;
			font-weight: 600;
		}
		.li {
			width: 100%;
			height: 100rpx;
			border-bottom: 1rpx solid #f5f5f5;
			text {
				color: #333;
			}
		}
		.li:nth-child(4) {
			border: none;
		}
	}
	
	.exchangeVue {
		width: 690rpx;
		background: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
	
		.label {
			font-weight: 700;
			font-size: 30rpx;
			color: #000;
		}
	
		input {
			flex: 1;
			height: 80rpx;
			border: 1rpx solid #f5f5f5;
			border-radius: 12rpx;
			padding-left: 20rpx;
			font-size: 28rpx;
		}
	
		.btn {
			width: 100rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			color: #fff;
			background: #22C55E;
			border-radius: 12rpx;
			margin-left: 30rpx;
		}
	}
	
	.pointVue {
		width: 690rpx;
		border-radius: 12rpx;
		background: #fff;
		padding: 30rpx 20rpx;
		.label {
			color: #000;
			font-weight: 600;
		}
		.info {
			width: 300rpx;
			height: 150rpx;
			background: #F0FDF4;
			border-radius: 12rpx;
			padding: 30rpx;
		}
		
		.info:nth-child(2) {
			background: #EFF6FF;
		}
		.li {
			width: 300rpx;
			height: 76rpx;
			text-align: center;
			line-height: 76rpx;
			color: #fff;
			background: #22C55E;
			border-radius: 10rpx;
		}
		
		.li:nth-child(2) {
			color: #fff;
			background: #347EEF;
		}
	}
	
	.avatarVue {
		width: 690rpx;
		border-radius: 12rpx;
		background: #fff;
		.name {
			color: #000;
			font-weight: 600;
			padding-left: 15rpx;
			line-height: 1;
		}
		.vipStr {
			color: #BC8B42;
			padding-left: 15rpx;
			line-height: 1;
			font-size: 24rpx;
		}
		.btn {
			width: 130rpx;
			height: 52rpx;
			background: #FEF9C3;
			text-align: center;
			line-height: 52rpx;
			color: #BC8B42;
			font-size: 24rpx;
			border-radius: 12rpx;
		}
	}
</style>
